<template>
  <div class="employee-application">
    <div class="buttons">
      <button @click="issueApplication" class="disburse">发放</button>
      <button @click="closeApplication" class="down">关闭</button>
      <!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="Refresh"></right-toolbar> -->
    </div> 

    <table class="application-table">
      <thead>
      <tr>
        <th>状态</th>
        <th>单据编号</th>
        <th>申请类型</th>
        <th>申请人</th>
        <th>申请公司</th>
        <th>申请部门</th>
        <th>申请日期</th>
        <th>申请说明</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="application in paginatedApplications" :key="application.id">
        <td>{{ application.status }}</td>
        <td>{{ application.id }}</td>
        <td>{{ application.type }}</td>
        <td>{{ application.applicant }}</td>
        <td>{{ application.company }}</td>
        <td>{{ application.department }}</td>
        <td>{{ application.date }}</td>
        <td>{{ application.description }}</td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>

import api from './api.js'

export default {
  data() {
    return {
      tableData: {
        list: [],
        loading: false,
        paging: {
          pageNum: 1,
          pageSize: 10,
          total: 0,
        },
      },
      queryParams: {},
      showSearch: false
    };
  },
  computed: {
    paginatedApplications() {
      const { pageNum, pageSize } = this.tableData.paging;
      const start = (pageNum - 1) * pageSize;
      return this.tableData.list.slice(start, start + pageSize);
    }
  },
  methods: {
    issueApplication() {
      alert("发放申请功能尚未实现");
    },
    closeApplication() {
      alert("关闭申请功能尚未实现");
    },
    handlePageChange(newPage) {
      this.tableData.paging.pageNum = newPage;
      this.getList();
    },

    getList() {
      this.tableData.loading = true;
      const { pageNum, pageSize } = this.tableData.paging;
      const pageReq = { page: pageNum - 1, size: pageSize };

      api.list({ ...this.queryParams }, pageReq)
          .then(response => {
            const { content, totalElements } = response;
            this.tableData.list = content;
            this.tableData.paging.total = totalElements;
          })
          .catch(() => {
            console.error("Failed to fetch applications.");
          })
          .finally(() => {
            this.tableData.loading = false;
          });
    },

    Refresh() {
      this.getList();
      this.$message.success("刷新成功");
    }
  },
  mounted() {
    this.getList();  
  }
};
</script>

<style scoped>
.employee-application {
  padding: 10px;
}

.buttons {
  width: 100%;
  display: flex;
  margin-bottom: 10px;
}

.application-table {
  width: 100%;
  height: 700px;
  border-collapse: collapse;
  background-color: #fff;
}

.application-table th,
.application-table td {
  background-color: #fff;
  padding: 8px;
}

.application-table th {
  font-size: 15px;
  border-bottom: 1px solid #e6e8eb;
  border-right: 1px solid #e6e8eb;
  font-size: 12px;
}

.disburse {
  width: 50px;
  height: 32px;
  background-color: #337cf7;
  color: #fff;
  border: 1px solid #fff;
  margin-right: 10px;
}

.down {
  width: 50px;
  height: 32px;
  background-color: #fff;
  border: 1px solid #fff;
  margin-right: 10px;
}
</style>